<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                list-style: none;
            }

            ul {
                width: 800px;
                border: 10px red solid;
                /* 将ul设置为一个弹性容器 */
                display: flex;

                /* flex-direction: column; */

                /* 
                  flex-wrap:
                    设置弹性元素是否再弹性容器中自动换行
                    可选值:
                      nowrap 默认值.元素不会自动换行
                      wrap   元素沿着辅轴方向自动换行
                      wrap-reverse 元素沿着辅轴反方向换行
                */
                /* flex-wrap: wrap-reverse; */

                /* 
                  flex-flow: wrap 和direction的简写属性
                */
                /* flex-flow: row wrap; */

                /* 
                  justify-content
                    - 如果分配主轴上的空白空间(主轴上的元素如何排列)
                    - 可选值:
                        flex-start 元素沿着主轴起边排列
                        flex-end 元素沿着主轴终边排列
                        center 元素居中排列
                        space-around 空白分布元素两侧
                        space-evenly 空白分布到元素的单侧
                        space-between 空白均匀分配到元素件
                */
                justify-content: space-evenly;
            }

            li {
                width: 100px;
                height: 100px;
                background-color: #bfa;
                font-size: 50px;
                text-align: center;
                line-height: 100px;
                flex-direction: 0;
            }

            li:nth-child(2) {
                background-color: pink;
            }

            li:nth-child(3) {
                background-color: orange;
            }
        </style>
    </head>
    <body>
        <!-- 
        flex(弹性盒,伸缩盒)
          - 是CSS中的又一种布局手段,它主要用来代替浮动来完成页面的布局。
          - flex可以使元素具有弹性,让元素跟随页面的大小的改变而改变。
          - 弹性容器
            - 要使用弹性盒,必须先将以个元素设置为弹性容器
            - 我们通过display 来设置弹性容器
                display:flex  设置为块级弹性容器
                display:inline-flex  设置为行内的弹性容器
          
          - 弹性元素
              - 弹性容器的直接子元素是弹性元素(弹性项)
              - 一个元素可以同时是弹性容器和弹性元素
              - 弹性元素可以同时是弹性容器


       -->
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </body>
</html>
